<template>
    <div>
        <p>firstName: {{ person.firstName }}</p>
        <p>lastName: {{ person.lastName }}</p>
        <p>fullName: {{ person.fullName }}</p>

        <input type="text" v-model="person.fullName">
    </div>
</template>

<script>

import { reactive, computed } from 'vue'
export default {
    setup () {
        const person = reactive({
            firstName: '爱新觉罗',
            lastName: '玄烨'
        })
        // person.fullName = computed(() => {
        //     return person.firstName + '&&' + person.lastName
        // })
        // 基础用法一
        // person.fullName = computed(() => person.firstName + 'xxx&&' + person.lastName)
        //  进阶用法
        person.fullName = computed({
            get () {
                return person.firstName + '&&' + person.lastName
            },
            //  改变的时候触发
            set (val) {
                console.log(val);
                let arr = val.split("&&")
                console.log(arr);
                person.firstName = arr[0]
                person.lastName = arr[1]
            }
        })


        return {
            person
        }

    }
}
</script>